<template>
  <view style="padding-bottom: 40rpx;"> 
         <view v-if="shopStore.liveSwitch" class="video-t">点击播放键，立现明厨亮灶</view>
         <!-- <view class="preview" id="video-container"></view> -->
         <!-- :themeData="{'poster':'https://cdn-static.yekjx.com/food/images/glive_img01.png','controls':{'muteBtn':false,'fullScreenBtn':false,'hdBtn':true}}" -->
         <ezplayer
           v-if="videoUrl.accessToken && videoUrl.url&& shopStore.liveSwitch"
           id="ezplayer"
           :accessToken="videoUrl.accessToken"
           :url="videoUrl.url"
           plugins=""
           recPlayTime=""
           width="100%"
           height="300"
		       :themeData="JSON.stringify({'poster': 'https://cdn-static.yekjx.com/food/images/glive_img01.png','controls':{'muteBtn':false,'fullScreenBtn':true,'hdBtn':true}})"
           watermark="ddx"
           :deviceSerial="videoUrl.snNumber"
           @handleError="handleError"
         />
		 <!-- themeData='{"poster":"https://cdn-static.yekjx.com/food/images/glive_img01.png","controls":{"muteBtn":false,"fullscreentn":false,"hdBtn":false}}' -->
		 <!-- :themeData="JSON.stringify({'poster':'https://cdn-static.yekjx.com/food/images/glive_img01.png','controls':{'muteBtn':false,'fullScreenBtn':false,'hdBtn':true}})" -->
         <view>
           <tabs ref="tabsRef" :list="tablist" @tabItemClick="tabSelect" marright="70rpx" activeWeight='700'
             :current="currentIndex" fontSize="32rpx" barMargin="10" activeColor="#53A87F" activeBarColor="#53A87F"></tabs>
         </view>
         <!-- <scroll-view scroll-y style="height:50vh;" scroll-with-animation :scroll-into-view="scrollIntoView" @scroll="VerticalMain"> -->
         <scroll-view scroll-y  style="height: calc(100vh - 806rpx);"  scroll-with-animation :scroll-into-view="scrollIntoView" @scroll="VerticalMain">
           <view class="list1 w-width"  v-for="(item,index) in list" :key="index" :id="'item-' + item.id">
               <text class="title-pd">{{item.name}}</text>
               <view>
                 <image v-for="(img,v) in item.imgList" class="img-style" :src="env.FileUrl + img" mode="" :key="v"></image>
               </view>
           </view>
         </scroll-view>
  </view>
  
</template>

<script lang="ts" setup>
  import { ref,nextTick } from 'vue';
  import { onShow } from '@dcloudio/uni-app';
  import { getVideoLive } from '@/api/vmeitime-http/index.js';
  import { mnavTo, showLoading, hideLoading } from '@/utils/helper';
  import tabs from '@/components/comtabs/comtabs.vue';
  // import demp from './new_file.vue'
  import { env } from '@/api/env.js';
  import mapi from '@/utils/mapi';
  import { useShopStore } from '@/stores/shopStore';
  const shopStore = useShopStore();
  const tabsRef = ref();
  const currentIndex = ref(0);
  const tabTop = ref(0);
  const scrollInto = ref(0);
  const scrollIntoView = ref(''); 
  const tablist = ref([
    {
      orderState: 'all',
      id:0,
      name: "明厨直播"
    }, {
      orderState: '142',
       id:1,
      name: "门店展示"
    }, {
      orderState: '146',
       id:2,
      name: "每日消杀"
    }
  ])
  const list = ref([
    {
      id : 0,
      name : '大火现炒,拒绝预制',
      imgList:['food/images/glive_img03.png'],
      top:0,
      bottom:0,
    },
    {
      id : 1,
      name : '200平米超大外卖基地',
      imgList:['food/images/glive_img04.png'],
      top:0,
      bottom:0,
    },
    {
      id : 2,
      name : '每日消杀，健康厨房',
      imgList:['food/images/glive_img02.png','food/images/glive_img01.png'],
      top:0,
      bottom:0,
    }
  ])
  const load = ref(true)
 const tabSelect = (item: any, index: any) => {
   currentIndex.value = item.id
   scrollIntoView.value = 'item-' + index; 
   console.log(scrollIntoView.value, '-----------------------------');
 };
 
 const VerticalMain = (e: any) => {
   let tabHeight = 0;
   // if (e.detail.scrollTop == 0) {
   // 	currentIndex.value = tablist.value[0].id
   // }
   const scrollTop = e.detail.scrollTop + 150;
   
    // 更新当前 tab
    for (let i = 0; i < list.value.length; i++) {
       const item = list.value[i];
       if (scrollTop >= item.top && scrollTop < item.bottom) {
          currentIndex.value = item.id;
          scrollIntoView.value = ''
          break; // 找到当前项目后跳出循环
       }
    }

   
   if (load.value) {
     for (let i = 0; i < list.value.length; i++) {
     	let view = uni.createSelectorQuery().select("#item-" + list.value[i].id);
     	view.fields({
     		size: true
     	}, (data : any) => {
     		list.value[i].top = tabHeight;
     		tabHeight = tabHeight + data.height;
     		list.value[i].bottom = tabHeight;
     	}).exec();
     }
     load.value = false
     
      console.log(list.value)
   }
   // console.log(e.detail.deltaY, '----------------------------------------------');
 };
  
  const handleError = e => {
        console.log(e,"视频组件的回调----------------------------");
        if (e.detail) {
        	const { msg } = e.detail;
          // do something
        }
  }
  const videoUrl = ref<any>({
    sn:[], //设备编号多个
    url:'rtmp://open.ys7.com/G82454638/1/live', //视频地址
    accessToken:'',
    snNumber:0 //设备编号
  })
  const fullTabs = [
	  {
	    orderState: 'all',
	    id:0,
	    name: "明厨直播"
	  }, {
	    orderState: '142',
	     id:1,
	    name: "门店展示"
	  }, {
	    orderState: '146',
	     id:2,
	    name: "每日消杀"
	  }
  ]
  const defTabs = [
  	   {
  	    orderState: '142',
  	     id:1,
  	    name: "门店展示"
  	  }, {
  	    orderState: '146',
  	     id:2,
  	    name: "每日消杀"
  	  }
  ]
  onShow(()=>{
	initData()
	nextTick(()=>{
		getVieoUrl()
	})
  })
  const initData = (source:any='')=>{
	   tablist.value = shopStore.liveSwitch?fullTabs:defTabs;
  }
  const getVieoUrl = async () => {
  	try {
  		showLoading()
  		let res = await getVideoLive({sell_member_id : shopStore.curSellerMemberId || ''})
  		
  		if (res.result) {
        videoUrl.value.sn = res.object.SNList
        videoUrl.value.accessToken = res.object.accessToken
        videoUrl.value.url = "rtmp://open.ys7.com/" + res.object.SNList[0].SN + "/1/live"
        videoUrl.value.snNumber = res.object.SNList[0].SN
        console.log('视频', videoUrl.value,videoUrl.value.accessToken)
  			hideLoading();
  		}
  	} catch (e) {
      console.error(e)
  		hideLoading();
      mapi.msg('获取视频数据失败!');
  	}
  }
  
</script>

<style lang="scss">
  .img-style{
    width:100%;
    height:400rpx;
    margin-bottom: 30rpx;
  }
  .video-t{
    color: #333;
    font-family: "Microsoft YaHei UI";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding: 20rpx;
  }
  .ezplayer--page-live {
    background-color: #f5f5f5 !important;
  }
  .w-width{
    padding: 0 20rpx;
  }
  .title-pd{
    padding: 20rpx 0 30rpx;
    color: #333;
    font-family: "Microsoft YaHei UI";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: flex;
  }
</style>
